<template>
  <div class="course-breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <a @click="goToCourse">课程</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="currentLevel >= 1">
        <a v-if="currentLevel > 1" @click="goToStage">阶段信息</a>
        <span v-else>阶段信息</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="currentLevel >= 2">
        <a v-if="currentLevel > 2" @click="goToCase">学生关联信息</a>
        <span v-else>学生关联信息</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="currentLevel >= 3">
        <a v-if="currentLevel > 3" @click="goToCaseDetail">案例信息</a>
        <span v-else>案例信息</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="currentLevel >= 4">
        <span>学生任务记录</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 定义props来接收当前页面级别和参数
const props = defineProps({
  courseId: {
    type: String,
    default: ''
  },
  courseName: {
    type: String,
    default: ''
  },
  stageId: {
    type: String,
    default: ''
  },
  stageName: {
    type: String,
    default: ''
  },
  caseId: {
    type: String,
    default: ''
  }
})

// 根据当前路由判断级别
const currentLevel = computed(() => {
  const path = route.path
  if (path.includes('/submitdetail')) return 4
  if (path.includes('/casedetail')) return 3
  if (path.includes('/stage')) return 2
  if (path.includes('/detail')) return 1
  return 0
})

// 导航方法
function goToCourse() {
  router.push('/coursemanagement/course')
}

function goToStage() {
  if (props.courseId && props.courseName) {
    router.push({
      path: '/coursemanagement/detail',
      query: { id: props.courseId, courseName: props.courseName }
    })
  }
}

function goToCase() {
  if (props.courseId && props.courseName) {
    router.push({
      path: '/coursemanagement/stage',
      query: { courseId: props.courseId, courseName: props.courseName }
    })
  }
}

function goToCaseDetail() {
  if (props.stageId && props.stageName) {
    router.push({
      path: '/coursemanagement/casedetail',
      query: { stageId: props.stageId, stageName: props.stageName, courseId: props.courseId, courseName: props.courseName }
    })
  }
}
</script>

<style scoped>
.course-breadcrumb {
  padding: 10px 0;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding-left: 15px;
}

.course-breadcrumb .el-breadcrumb__item a {
  color: #409EFF;
  cursor: pointer;
  text-decoration: none;
}

.course-breadcrumb .el-breadcrumb__item a:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.course-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #303133;
  font-weight: 500;
}
</style>